<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>确认订单页面</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/jquery.step.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.step.min.js"></script>
	</head>

	<body>
		<div id="web">
			<!--顶部-->
			<div class="top">
				<div class="top_login clearfix">
<<<<<<< HEAD
					<span class="fl t_lef"><a href="register_4.html">注册</a>|<a href="register_4.html">登录</a>|<a href="register_4_vip.html">VIP登录</a></span>
					<span class="fr t_rig"><a href="shopping_4.html">付款</a>|<a href="register_4.html">我的订单</a>|<a href="settle_4.html"><img src="img/gouwuche.png"/ style="vertical-align: middle;padding-right: 5px;"><b>(0)</b></a></span>
=======

					<span class="fl t_lef"><a href="register_4.html">注册</a>|<a href="register_4.html">登录</a>|<a href="register_4_vip.html">VIP登录</a></span>
					<span class="fr t_rig"><a href="shopping_4.html">付款</a>|<a href="register_4.html">我的订单</a>|<a href="settle_4.html"><img src="img/gouwuche.png"/ style="vertical-align: middle;padding-right: 5px;"><b>(0)</b></a></span>

>>>>>>> ac685738ab80ea8ee5d4b8286bb2ff63734ec1cb
				</div>
			</div>
			<!--logo-->
			<div class="search clearfix">
				<div class="logo">
					<a href="index.html"><img src="img/logo.jpg" /></a>
				</div>
				<!--订单页面的订单部分-->
				<div class="main">
					<div id="step" class="clearfix"></div>
					<div class="btns">
						<button id="prevBtn">上一步</button>
						<button id="nextBtn">下一步</button>
						<button id="btn1">跳到第二步</button>
						<button id="btn2">跳到第三步</button>
					</div>
					<div class="info">index：<span id="index"></span></div>
				</div>
			</div>
			<hr />
			<!--以上是页面头部-->

			<!--订单信息-->
			<div class="order_info clearfix">
				<span>填写并核对订单信息</span>
				<div class="ord_table">
					<form action="" method="post">
						<div class="delivery">
							<div class="consignee">
								<p>收货人信息【修改】</p>
							</div>
							<div class="infomation clearfix">
								<input type="radio" name="xinxi" id="xin_xi1" value="" style="vertical-align: middle;" />
								<label for="xin_xi1">
									<div class="xinxi">
										姓名：测试<br /> 地区：广东省深圳市罗湖区
										<br /> 地址：保税区
										<br /> 手机：13510127896
									</div>
								</label>
								<input type="radio" name="xinxi" id="xin_xi2" value="" />
								<label for="xin_xi2">
									<div class="xinxi">
										姓名：测试<br /> 地区：广东省深圳市罗湖区
										<br /> 地址：保税区
										<br /> 手机：13510127896
									</div>
								</label>
							</div>
							<div class="consignee">
								<p>配送方式</p>
							</div>
							<p class="sorry">
								对不起，你的订单无法继续进行，有可能是以下原因：1、送货地址没有填写; 2、你选购的商品在改地区不能配送联系工 作人员。
							</p>
						</div>
					</form>
				</div>

				<!--订单详情-->
				<span class="ord_xq">订单详情</span>

				<form action="" method="post">
					<div id="gou_xuan">
						<input type="checkbox" name="che" id="shuzi1" value="" />
						<label for="shuzi1">全选</label>
						<a href=""><span>批量删除</span></a>
					</div>
					<ul class="shopping_1">
						<li class="column">购物车的商品</li>
						<li>价格(元)</li>
						<li>&nbsp;&nbsp;&nbsp;&nbsp;数量</li>
						<li>&nbsp;小计(元)</li>
						<li>操作</li>
					</ul>
					<ul class="shopping_1 shop_dian">
						<li class="column">某某直营店</li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>750.00</li>
					</ul>
					<ul class="shopping_car clearfix">
						<li class="column">
							<input class="fl" type="checkbox" name="" id="tp3" value="" />
							<label for="tp3">
								<img class="fl" src="img/shop_2.jpg" />
								<div class="pp_name fl">
									<p>商品品牌名称</p>
									<p><b>规格:</b>规格X规格</p>
									<p><b>颜色:</b>白色</p>
								</div>
							</label>
						</li>
						<li><span>150</span></li>
						<li>
							<span>
								<input class="min" name="" type="button" value="-" style="width: 15px;"/>
								<input class="text_box" name="" type="text" value="1" style="width: 34px;text-align: center;"/>
								<input class="add" name="" type="button" value="+" style="width: 15px;"/>
							</span>
						</li>
						<li><span>￥750.00</span></li>
						<li><span>操作</span></li>
					</ul>
					<ul class="shopping_1 ord_bei_zhu">
						<li class="beizhu fl">订单备注：</li>
						<div class="fl"><textarea onfocus="if(value=='备注中有关收货人信息、支付方式、配送方式、发票信息等要求一律以上面的选择为准、备注无效'){value=''}" onblur="if (value ==''){value='备注中有关收货人信息、支付方式、配送方式、发票信息等要求一律以上面的选择为准、备注无效'}">备注中有关收货人信息、支付方式、配送方式、发票信息等要求一律以上面的选择为准、备注无效</textarea></div>
					</ul>
					<div class="sum">
						商品金额：¥750.00元+运费：¥0.00元-优惠券：¥0.00元-储存卡：¥0.00元
					</div>
					<hr />
					<div class="pay_right fr">
						你需要为订单支付：<span>¥750.00</span>元<br />
						<a href="sub_order.html"/>提交订单</a>
					</div>
				</form>
			</div>

			<!--底部-->
			<div class="di_bu">
				<div class="di_bu_main clearfix">
					<ul class="ul">
						<li>
							<img class="fl" src="img/you.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">品质保障</a></span><br />
								<span><a href="">品质保证</a> <a href="">购物无忧</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/sheng.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">特色服务</a></span><br />
								<span><a href="">针对户型</a> <a href="">私人定制</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/te.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">全网最低</a></span><br />
								<span><a href="">厂家直销</a> <a href="">低价承诺</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/figure.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">帮助中心</a></span><br />
								<span><a href="">您的购物指南</a></span>
							</div>
						</li>
					</ul>

					<ul class="di_bu_nav clearfix">
						<li>
							新手指南<br />
							<span><a href="">新手指南</a></span><br />
							<span><a href="">购物流程</a></span>
						</li>
						<li>
							支付方式<br />
							<span><a href="">支付宝</a></span><br />
							<span><a href="">微信支付</a></span>
						</li>
						<li>
							物流配送<br />
							<span><a href="">配送方式</a></span><br />
							<span><a href="">服务流程</a></span>
						</li>
						<li>
							客服中心<br />
							<span><a href="">在线客服</a></span><br />
							<span><a href="">常见问题</a></span></a>
						</li>
						<li>
							扫一扫，关注鲁班兄弟<br />
							<img src="img/QR.jpg" />
						</li>
					</ul>
				</div>
			</div>

			<!--版权尾部-->
			<footer>
				<div class="foot">
					<span>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035771</span> |
					<a href="">关于我们</a>|
					<a href="">联系我们</a>|
					<a href="">法律声明</a>
				</div>
			</footer>
		</div>
	</body>
	<style>
		button {
			display: inline-block;
			padding: 6px 12px;
			font-size: 14px;
			line-height: 1.42857143;
			text-align: center;
			cursor: pointer;
			border: 1px solid transparent;
			border-radius: 4px;
			color: #fff;
			background-color: #5bc0de;
		}
		
		.main {
			width: 597px;
			position: absolute;
			right: 0;
			top: 0;
			margin: 20px auto;
			margin-right: 40px;
		}
		
		#step {
			margin-bottom: 30px;
		}
		
		.btns {
			float: left;
		}
		
		.info {
			float: left;
			height: 34px;
			line-height: 34px;
			margin-left: 40px;
			font-size: 28px;
			font-weight: bold;
			color: #928787;
		}
		
		.info span {
			color: red;
		}
	</style>
	<script type="text/javascript">
		var $step = $("#step");
		var $index = $("#index");

		$step.step({
			index: 0,
			time: 500,
			title: ["购物车", "提交订单", "确认订单"]
		});

		$index.text($step.getIndex());

		$("#prevBtn").on("click", function() {
			$step.prevStep();
			$index.text($step.getIndex());
		});

		$("#nextBtn").on("click", function() {
			$step.nextStep();
			$index.text($step.getIndex());
		});

		$("#btn1").on("click", function() {
			$step.toStep(1);
			$index.text($step.getIndex());
		});

		$("#btn2").on("click", function() {
			$step.toStep(2);
			$index.text($step.getIndex());
		});
	</script>
	<script>
		$(function() {
			$(".add").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) + 1)
				setTotal();
			})
			$(".min").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) - 1)
				if(parseInt(t.val()) < 0) {
					t.val(0);
				}
				setTotal();
			})

			function setTotal() {
				var s = 0;
				$("#tab td").each(function() {
					s += parseInt($(this).find('input[class*=text_box]').val()) * parseFloat($(this).find('span[class*=price]').text());
				});
				$("#total").html(s.toFixed(2));
			}
			setTotal();

		})
	</script>

</html>